{{include file="common@layout/_meta_x-admin" /}}
<body>

<script id="tpl" type="text/template">
    <div class="layui-col-xs6 layui-col-sm6 layui-col-md12" id="create_enum_${data.field}">
        <label class="layui-form-label">${data.field}</label>
        <div class="layui-input-inline" style="width: 100px;">
            <input type="text" lay-verify="title" name="key" onkeyup="toUpperCase(this)" autocomplete="off"
                   placeholder="请输入属性"
                   class="layui-input">
        </div>
        <div class="layui-input-inline" style="width: 100px;">
            <input type="text" lay-verify="title" name="value" oninput="value=value.replace(/[^\d]/g,'')"
                   autocomplete="off" placeholder="请输入属性值"
                   class="layui-input">
        </div>
        <div class="layui-input-inline" style="width: 100px;">
            <input type="text" lay-verify="title" name="text"
                   autocomplete="off" placeholder="请输入属性文字"
                   class="layui-input">
        </div>
        <button type="button" class="layui-btn layui-btn-normal" onclick="createEnumKV('${data.field}')">新增枚举值</button>
    </div>
    {@each data.kvList as item,index}
    <div class="layui-col-xs6 layui-col-sm6 layui-col-md12">
        <label class="layui-form-label"></label>
        <div class="layui-input-inline" style="width: 100px;">
            <input type="text" value="${item.key}" disabled name="title" lay-verify="title" autocomplete="off"
                   class="layui-input">
        </div>
        <div class="layui-input-inline" style="width: 100px;">
            <input type="text" disabled name="title" value="${item.value}" lay-verify="title" autocomplete="off"
                   class="layui-input">
        </div>
        <div class="layui-input-inline" style="width: 100px;">
            <input type="text" disabled name="title" value="${item.text}" lay-verify="title" autocomplete="off"
                   class="layui-input">
        </div>
        <button type="button" class="layui-btn layui-btn-sm layui-btn-danger"
                onclick="removeKV('${data.field}',${index})">移除
        </button>
    </div>
    {@/each}
</script>


<script id="createTpl" type="text/template">
    {@each columns as item,index}
        {@if 'PRI' !== item.COLUMN_KEY}
            <div class="layui-col-xs6 layui-col-sm6 layui-col-md12" >
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">${item.COLUMN_NAME}</label>
                        <div class="layui-input-inline">
                            <select lay-verify="required" lay-filter="createFormChange" id="${item.COLUMN_NAME}"  data-index="${index}">
                                <option value="">请选择表单控件</option>
                                {@each formItems as it,index}
                                        {@if it.formType=== item.formType}
                                            <option value="${it.formType}" selected>${it.text}</option>
                                        {@else}
                                            <option value="${it.formType}">${it.text}</option>
                                        {@/if}
                                {@/each}
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">是否必填?</label>
                        <div class="layui-input-inline" style="width: 100px;">
                            {@if item.notNull == true}
                            <input  checked  lay-filter="notNullCreate" data-index="${index}"
                                   type="checkbox" lay-skin="primary" lay-verify="required" lay-filter="selector">
                            {@else}
                            <input   lay-filter="notNullCreate" data-index="${index}"
                                    type="checkbox" lay-skin="primary" lay-verify="required" lay-filter="selector">
                            {@/if}
                        </div>
                    </div>
                </div>
            </div>
        {@/if}
    {@/each}
</script>

<script id="editTpl" type="text/template">
    {@each columns as item,index}
    <div class="layui-col-xs6 layui-col-sm6 layui-col-md12" >
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">${item.COLUMN_NAME}</label>
                <div class="layui-input-inline">
                    <select lay-verify="required" lay-filter="editFormChange" id="${item.COLUMN_NAME}"  data-index="${index}">
                        <option value="">请选择表单控件</option>
                        {@each formItems as it,index}
                        {@if it.formType=== item.formType}
                        <option value="${it.formType}" selected>${it.text}</option>
                        {@else}
                        <option value="${it.formType}">${it.text}</option>
                        {@/if}
                        {@/each}
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">是否必填?</label>
                <div class="layui-input-inline" style="width: 100px;">
                    {@if item.notNull == true}
                    <input  checked  lay-filter="notNullCreate" data-index="${index}"
                            type="checkbox" lay-skin="primary" lay-verify="required" lay-filter="notNullEdit">
                    {@else}
                    <input   lay-filter="notNullCreate" data-index="${index}"
                             type="checkbox" lay-skin="primary" lay-verify="required" lay-filter="notNullEdit">
                    {@/if}
                </div>
            </div>
        </div>
    </div>
    {@/each}
</script>

<div class="layui-fluid">
    <div class="layui-row">
        <form class="layui-form layui-form-pane" method="post">
            {{:widget('common/Form/input',['数据库表名','tableName',$tableBean.tableName,true,true])}}
            <div style="padding: 20px; background-color: #F2F2F2;">
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md12">
                        <div class="layui-card" style="min-height: 80px;">
                            <div class="layui-card-header">温馨提示</div>
                            <div class="layui-card-body">
                                1.暂时无法做到对已存在的枚举类修改的功能，主要的问题在于属性文字的获取困难，待优化<br>
                                2.如果勾选生成了控制器，建议也勾选生成权限，可以减少在后台添加权限的操作<br>
                                3.自动生成CURD代码只有在Manger和Controller没有生成的情况下有效，已存在为了防止改动到实际业务代码，不做覆盖处理<br>
                                4.进入编辑页面（当前页面）时已经自动生成了Bean和Model类
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <fieldset class="layui-elem-field">
                <legend>文件生成状态</legend>
                <div class="layui-field-box">
                    <div class="layui-row" style="margin-bottom: 15px">
                        <div class="layui-col-xs6 layui-col-sm6 layui-col-md3">
                            <label class="layui-form-label">已生成Bean?</label>
                            <div class="layui-input-inline" style="width: 100px;">
                                <input type="checkbox" disabled {{if condition="$filesInfo.bean"
                                       }}checked="checked" {{/if}}
                                lay-skin="switch">
                            </div>
                        </div>
                        <div class="layui-col-xs6 layui-col-sm6 layui-col-md3">
                            <label class="layui-form-label">已生成Model?</label>
                            <div class="layui-input-inline" style="width: 100px;">
                                <input type="checkbox" disabled {{if condition="$filesInfo.model"
                                       }}checked="checked" {{/if}}
                                lay-skin="switch">
                            </div>
                        </div>

                        <div class="layui-col-xs6 layui-col-sm6 layui-col-md3">
                            <label class="layui-form-label">已生成Validate?</label>
                            <div class="layui-input-inline" style="width: 100px;">
                                <input type="checkbox" disabled {{if condition="$filesInfo.validate"
                                       }}checked="checked" {{/if}}
                                lay-skin="switch">
                            </div>
                        </div>
                        <div class="layui-col-xs6 layui-col-sm6 layui-col-md3">
                            <label class="layui-form-label">已生成Manager?</label>
                            <div class="layui-input-inline" style="width: 100px;">
                                <input type="checkbox" disabled {{if condition="$filesInfo.manager"
                                       }}checked="checked" {{/if}}
                                lay-skin="switch">
                            </div>
                        </div>
                        <div class="layui-col-xs6 layui-col-sm6 layui-col-md3">
                            <label class="layui-form-label">已生成Controller?</label>
                            <div class="layui-input-inline" style="width: 100px;">
                                <input type="checkbox" disabled {{if condition="$filesInfo.controller"
                                       }}checked="checked" {{/if}}
                                lay-skin="switch">
                            </div>
                        </div>
                    </div>
                </div>
            </fieldset>
            {{if condition="!$filesInfo.manager"
            }}
            <fieldset class="layui-elem-field">
                <legend>自动生成CURD配置</legend>
                <div class="layui-field-box">
                    <div class="layui-row">
                        <div class="layui-col-xs6 layui-col-sm6 layui-col-md3">
                            <div class="layui-form-item">
                                <label class="layui-form-label">新增代码</label>
                                <div class="layui-input-block">
                                    <input type="checkbox" checked="checked" name="create" lay-skin="switch">
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-xs6 layui-col-sm6 layui-col-md3">
                            <div class="layui-form-item">
                                <label class="layui-form-label">查询列表代码</label>
                                <div class="layui-input-block">
                                    <input type="checkbox" checked="checked" name="query" lay-skin="switch">
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-xs6 layui-col-sm6 layui-col-md3">
                            <div class="layui-form-item">
                                <label class="layui-form-label">编辑代码</label>
                                <div class="layui-input-block">
                                    <input type="checkbox" checked="checked" name="edit" lay-skin="switch">
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-xs6 layui-col-sm6 layui-col-md3">
                            <div class="layui-form-item">
                                <label class="layui-form-label">删除代码</label>
                                <div class="layui-input-block">
                                    <input type="checkbox" checked="checked" name="delete" lay-skin="switch">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-field-box">
                    <fieldset class="layui-elem-field">
                        <legend>新增代码配置</legend>
                        <div class="layui-field-box">
                            <div id="createCode">
                            </div>
                        </div>
                    </fieldset>
                </div>
                <div class="layui-field-box">
                    <fieldset class="layui-elem-field">
                        <legend>编辑代码配置</legend>
                        <div class="layui-field-box">
                            <div id="editCode"></div>
                        </div>
                    </fieldset>
                </div>

                <div class="layui-field-box">
                    <fieldset class="layui-elem-field">
                        <legend>列表查询代码配置</legend>
                        <div class="layui-field-box">
                            <div id="listCode"></div>
                        </div>
                    </fieldset>
                </div>
            </fieldset>
            {{/if}}

            <fieldset class="layui-elem-field">
                <legend>枚举量生成配置</legend>
                <div class="layui-field-box">
                    <div id="test1"></div>
                </div>
                <div class="layui-field-box">
                    <fieldset class="layui-elem-field">
                        <legend>枚举字段</legend>
                        <div class="layui-field-box">
                            <div id="enumList"></div>
                        </div>
                    </fieldset>
                </div>
            </fieldset>
            <div class="layui-form-item">
                <label class="layui-form-label">目标模块</label>
                <div class="layui-input-block">
                    <select lay-verify="required" lay-filter="createFormChange"  name="module" data-index="${index}">
                        {{foreach $modules as $key=>$vo }}
                        <option value="{{$vo}}">{{$vo}}</option>
                        {{/foreach}}
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">生成控制器</label>
                <div class="layui-input-block">
                    <input type="checkbox" {{if condition="$filesInfo.controller"
                           }}checked="checked" {{/if}} name="isCreateController" lay-skin="switch">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">生成权限</label>
                <div class="layui-input-block">
                    <input type="checkbox" name="isCreatePermission" lay-skin="switch">
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>

        </form>
    </div>
</div>
</body>
<script>

    //新增字段
    var createColumnArr = '{{$createColumn|raw}}';
    //编辑字段
    var editColumnArr = '{{$editColumn|raw}}';

    $(function () {
        createColumnArr = JSON.parse(createColumnArr);
        editColumnArr = JSON.parse(editColumnArr);

        createColumnArr.formItems = [
            {formType: 'input', text: '输入框'},
            {formType: 'select', text: '下拉框'},
            {formType: 'textarea', text: '富文本'},
        ];
        editColumnArr.formItems = [
            {formType: 'input', text: '输入框'},
            {formType: 'select', text: '下拉框'},
            {formType: 'textarea', text: '富文本'},
        ];

        var tpl = document.getElementById("createTpl").innerHTML;
        var html = juicer(tpl, createColumnArr);
        $("#createCode").append(html);

        tpl = document.getElementById("editTpl").innerHTML;
        html = juicer(tpl, editColumnArr);
        $("#editCode").append(html);

        layui.use(['form', 'jquery'], function () {
            var form = layui.form;
            var $ = layui.jquery;

            //监听提交
            form.on('submit(formDemo)', function (data) {
                data.field.enumList = selectFiledsTplArr
                data.field.createProperty = createColumnArr.columns
                data.field.editProperty = editColumnArr.columns
                ajaxRequest('', data.field)
                return false;
            });
            form.on('select(createFormChange)', function(data){
                // console.log(data.elem); //得到select原始DOM对象
                // console.log(data.othis); //得到美化后的DOM对象
                console.log(data.value); //得到被选中的值
                var index = $(data.elem).data("index");
                createColumnArr.columns[index]['formType'] = data.value
            });
            form.on('select(editFormChange)', function(data){
                console.log(data.value); //得到被选中的值
                var index = $(data.elem).data("index");
                editColumnArr.columns[index]['formType'] = data.value
            });
            form.on('checkbox(notNullCreate)', function(data){
                console.log(data.elem.checked); //是否被选中，true或者false
                console.log(data.value); //复选框value值，也可以通过data.elem.value得到
                var index = $(data.elem).data("index");
                createColumnArr.columns[index]['notNull'] = data.elem.checked
                // debugger
            });
            form.on('checkbox(notNullEdit)', function(data){
                console.log(data.elem.checked); //是否被选中，true或者false
                console.log(data.value); //复选框value值，也可以通过data.elem.value得到
                var index = $(data.elem).data("index");
                editColumnArr.columns[index]['notNull'] = data.elem.checked
            });
        });
    });

    var fields = '{{$filesMap|raw}}';
    var selectFileds = '{{$selectFilesMap|raw}}';
    fields = JSON.parse(fields);
    selectFileds = JSON.parse(selectFileds);

    layui.use('transfer', function () {
        var transfer = layui.transfer;
        //初始右侧数据
        transfer.render({
            elem: '#test1',
            title: ['表字段', '已选字段']
            , data: fields
            , value: selectFileds, onchange: function (data, index) {
                console.log(data); //得到当前被穿梭的数据
                console.log(index); //如果数据来自左边，index 为 0，否则为 1

            }
        });
    });
    juicer.set('cache', false);
    var tpl = document.getElementById("tpl").innerHTML;
    var selectFiledsTplArr = new Array();
    for (var i = 0; i < selectFileds.length; i++) {
        var item = {data: {field: selectFileds[i], kvList: selectFileds[i]['kvList']}};
        for (var j = 0; j < fields.length; j++) {
            if (fields[j].kvList && fields[j].title == selectFileds[i]) {
                item['data']['kvList'] = fields[j].kvList;
            }
        }
        selectFiledsTplArr.push(item)
    }
    for (var i = 0; i < selectFiledsTplArr.length; i++) {
        var html = juicer(tpl, selectFiledsTplArr[i]);
        $("#enumList").append(html);
    }

    /**
     * 创建枚举值
     */
    function createEnumKV(id) {
        var key = $("#create_enum_" + id).find('input[name="key"]').val();
        var value = $("#create_enum_" + id).find('input[name="value"]').val();
        var text = $("#create_enum_" + id).find('input[name="text"]').val();
        if (!key || !value || key == '' || value == '') {
            layer.msg('键和值不可为空');
            return;
        }
        for (var i = 0; i < selectFiledsTplArr.length; i++) {
            if (selectFiledsTplArr[i].data.field == id) {
                if (!selectFiledsTplArr[i].data.kvList) selectFiledsTplArr[i].data.kvList = new Array();
                else {
                    for (var j = 0; j < selectFiledsTplArr[i].data.kvList.length; j++) {
                        if (selectFiledsTplArr[i].data.kvList[j].value == value) {
                            layer.msg('该值已经存在');
                            return;
                        }
                    }
                }
                selectFiledsTplArr[i].data.kvList.push({key: key, value: value, text: text})
                break;
            }
        }
        $("#" + id).find('input[name="key"]').val('');
        $("#" + id).find('input[name="value"]').val('');
        $("#enumList").html('');
        for (var i = 0; i < selectFiledsTplArr.length; i++) {
            var html = juicer(tpl, selectFiledsTplArr[i]);
            $("#enumList").append(html);
        }
    }

    function toUpperCase(obj) {
        obj.value = obj.value.toUpperCase()
    }

    /**
     * 移除枚举值
     */
    function removeKV(field, index) {
        for (var i = 0; i < selectFiledsTplArr.length; i++) {
            if (selectFiledsTplArr[i].data.field == field) {
                selectFiledsTplArr[i].data.kvList.splice(index, 1);
                break;
            }
        }
        $("#enumList").html('');
        for (var i = 0; i < selectFiledsTplArr.length; i++) {
            var html = juicer(tpl, selectFiledsTplArr[i]);
            $("#enumList").append(html);
        }
    }




</script>